<!-- 核对订单 -->
<template>
  <view class="check">
    <view class="check_time groups">
      <view class="title d-flex">
        <text class="siyuan-medium">选择日期</text>
        <label class="siyuan-medium" @click="showCalendar = true">
          日历
          <van-icon name="arrow" class="arrow-icon" custom-style="font-weight: 700;" />
        </label>
      </view>
      <!-- Date -->
      <DateBlock
        v-model:check-day="currentDay"
        :start-time="itemData.actStartTime"
        :end-time="itemData.actEndTime"
      />
    </view>
    <view class="check_time groups">
      <view class="title d-flex">
        <text class="siyuan-medium">选择票</text>
      </view>
      <!-- activity list -->
      <view
        class="list border-top"
      >
		<view class="list_cell border-bottom" v-for="(item, index) in checkTicket" :key="index">
			<view class="list_cell_item" :class="[subIndex == 1?'border-left':'',(index*2)+subIndex == packageIndex?'actived':'']" v-for="(subItem, subIndex) in item" key="subIndex" @click="packageIndex = (index*2)+subIndex">
				<view class="title siyuan-medium">
				  {{ subItem.priceName }}
				</view>
				<view class="time intel-one-mono-medium">
				  19:30-21:00
				  <br />
				  ￥{{ subItem.actPrice }}
				</view>
				<view class="price intel-one-mono-medium">￥{{ subItem.actPrice }}</view>
			</view>
		</view>
        <!-- <view
          class="list_cell"
          v-for="(item, index) in itemData.actPriceVOList"
          :key="index"
          :class="{
            actived: index == packageIndex,
            'border-bottom':
              itemData.actPriceVOList.length % 2 == 0
                ? true
                : index == itemData.actPriceVOList.length - 1
                ? false
                : true,
          }"
          @click="packageIndex = index"
        >
          <view class="title siyuan-medium">
            {{ item.priceName }}
          </view>
          <view class="time intel-one-mono-medium">
            19:30-21:00
            <br />
            ￥{{ item.actPrice }}
          </view>
          <view class="price intel-one-mono-medium">￥{{ item.actPrice }}</view>
        </view> -->
      </view>
    </view>
    <!--Account-->

    <Option>
      <template v-slot:btn>
        <view class="account">
          <Stepper v-model:count="count" />
        </view>
        <!-- Price -->
        <view class="pay d-flex">
          <text class="intel-one-mono-medium">
            {{ count * itemData?.actPriceVOList[packageIndex]?.actPrice }}
          </text>
          <button class="black-btn" @click="submitFun()">确认购票</button>
        </view>
      </template>
    </Option>

    <!-- calendar -->
    <view class="calendar-container" v-if="itemData.actStartTime && itemData.actEndTime">
      <van-calendar
        type="single"
        v-model:show="showCalendar"
        :show-confirm="false"
		:show-mark="false"
        color="#000000"
        :min-date="getTimes('min')"
        :max-date="getTimes('max')"
        @select="selectTime"
        @close="showCalendar = false"
      />
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import DateBlock from "../Calendar/Date.vue";
import Option from "@/components/FooterBar/Option.vue";
import Stepper from "./Stepper.vue";
import { getDay, doHandleMonth } from "@/util/index.js";

let props = defineProps({
  itemData: {
    type: Object,
    default: {},
  },
  orderData: {
    type: Object,
    default: {},
  },
});


let emits = defineEmits(["submitClick", "update:orderData"]);
let packageIndex = ref(0);
let count = ref(1);
let currentDay = ref(getDay(0));
let showCalendar = ref(false);
let checkTicket = ref([]);

watch(
	()=> props.itemData,
	val=>{
		let list = val.actPriceVOList || [];
		const newList = [];
		
		for (let i = 0; i < list.length; i += 2) {
		  newList.push(list.slice(i, i + 2));
		}
		console.log('checkTicket',newList)
		checkTicket.value = [...newList];
	}
)

function selectTime(e) {
  showCalendar.value = false;
  let time = e.detail;
  currentDay.value =
    time.getFullYear() +
    "-" +
    doHandleMonth(time.getMonth() + 1) +
    "-" +
    doHandleMonth(time.getDate());
}

function getTimes(type) {
  return type == "min" ? new Date().getTime() : new Date(props.itemData.actEndTime).getTime();
}

function submitFun() {
  emits("update:orderData", {
    actPriceId: props.itemData.actPriceVOList[packageIndex.value].id,
    number: count.value,
    currentDay: currentDay.value,
    actPriceVOList: props.itemData.actPriceVOList[packageIndex.value],
  });
  emits("submitClick");
}

onMounted(()=>{
	let list = props.itemData.actPriceVOList || [];
	const newList = [];
	
	for (let i = 0; i < list.length; i += 2) {
	  newList.push(list.slice(i, i + 2));
	}
	console.log('checkTicket',newList)
	checkTicket.value = [...newList];
	
})
</script>

<style lang="scss" scoped>
.check {
  .groups {
    padding: 46rpx 20rpx 0;
    margin-bottom: 24rpx;
    .title {
      align-items: center;
      justify-content: space-between;
      padding-bottom: 40rpx;
      font-size: 26rpx;
      label {
        .arrow-icon {
          margin-left: 12rpx;
          vertical-align: middle;
        }
      }
    }
  }

  .list {
    &_cell {
		&_item {
			display: inline-block;
			width: 50%;
			display: inline-block;
			padding: 26rpx 28rpx 24rpx;
			font-size: 24rpx;
			color: var(--grey-text);
			.title {
			  height: 134rpx;
			  color: inherit;
			  white-space: break-spaces;
			}
			.time {
			  color: inherit;
			  opacity: 0;
			}
			.price {
			  color: inherit;
			}
		}
      
    }
    &_cell_item.actived {
      color: var(--default-text);
    }
    
  }

  .pay {
    padding: 70rpx 56rpx 0 70rpx;
    align-items: center;
    justify-content: space-between;
    text {
      position: relative;
      padding-left: 34rpx;
      font-size: 40rpx;
    }
    text::before {
      content: "￥";
      position: absolute;
      left: 0;
      top: 0;
      font-family: "SourceHanSansCN-Medium";
    }
    button {
      width: 152rpx;
      height: 102rpx;
      margin: 0;
      line-height: 102rpx;
    }
  }
}
</style>
